import { TreeSelectKeyContext } from '@/pages/accountingEntryTest';
import { Typography, message } from 'antd';
import { useContext, useEffect, useRef, useState } from 'react';
import './index.less';
// import { Item, Toolbar } from "devextreme-react/data-grid";
import AssistPupop from '@/pages/components/AssistPupop';
import { moneyFormatCol, nanoid10 } from '@/utils';
import { CheckBox, NumberBox, SelectBox, TextBox } from 'devextreme-react';
import Button from 'devextreme-react/button';
import { Summary, TotalItem } from 'devextreme-react/data-grid';
import { Button as TextBoxButton } from 'devextreme-react/text-box';
import Toolbar, { Item } from 'devextreme-react/toolbar';
import { useModel } from 'umi';
import SubjectPopup from '~/public/cpas-business/components-bs/SubjectPopup';
import { CpasIcon, DevGrid, DevToolBar } from '~/public/cpas-ui';
import AdvancedQueryPupop from '../advancedQueryPupop';
import { getChangeApiNameData, getPZLXData } from '../service';
import { columnsDataMEJZ, conditionStatesData } from './tableColumnData';
import AccountingVoucherPupop from '../accountingVoucherPupop';
import { msgInfo } from '@/utils/msg';
import { ClearOutlined } from '@ant-design/icons';

const { Text } = Typography;

const ConditionalQueryTableList = (props: any) => {
  const { treeSelecNode, setTreeSelecNode } = useContext<any>(TreeSelectKeyContext);

  const { tableYearArr, treeSelectName, yearID } = treeSelecNode;
  const { initialState } = useModel('@@initialState');

  const { dbname } = initialState?.curPart as any;
  const { username } = initialState?.curUser as any;

  const { changeTab } = props;

  // const [checkBoxData, setCheckBoxData] = useState<boolean>(true);
  const accountingVoucherPupopRef = useRef<any>(null);

  const [queryData, setQueryData] = useState<string>('');
  const [paramsQueryData, setparamsQueryData] = useState<string>('');
  const [dataGridData, setDataGridData] = useState<any[]>([]);
  const [selectPzlxData, setSelectPzlxData] = useState<any[]>([]);


  const assistPupopRef = useRef<any>(null);
  const advancedQueryPupopRef = useRef<any>(null);

  const [devBox, setDevBox] = useState<any>('guid');

  const [checkContent, setCheckContent] = useState<boolean>(false);
  const SubjectRef = useRef<any>();
  const devGridRef = useRef<any>(null);

  function generateYearMonths(year: number) {
    const result: any[] = [
      {
        id: 0,
        selectName: '',
      },
    ];
    for (let month = 1; month < 13; month++) {
      result.push({
        id: month,
        selectName: year?.toString() + month?.toString().padStart(2, '0'),
      });
    }
    return result;
  }

  const [searchParams, setSearchParams] = useState<any>({
    yearID,
    kmmcStr: '',
    dfkmStr: '',
    hsxmStr: '',
    je1Str: '',
    je2Str: '',
    je3Str: '',
    pzlxStr: '',
    zyStr: '',
    monthStartStr: '',
    monthEndStr: '',
    xswzpzCheck: false,
    checkQueryContent: true,
  });




  const getPZLXSelectData = async (data_id: string) => {
    const res = await getPZLXData({
      dbname,
      Data_ID: data_id
    });
    if (res.success) {
      setSelectPzlxData(res.data);
    } else {
      setSelectPzlxData(res.data);
    }
  }

  useEffect(() => {
    // 初始化 基础数据
    setSearchParams({
      yearID,
      kmmcStr: '',
      dfkmStr: '',
      je1Str: '',
      je2Str: '',
      je3Str: '',
      pzlxStr: '',
      hsxmStr: '',
      zyStr: '',
      monthStartStr: '',
      monthEndStr: '',
      xswzpzCheck: false,
      checkQueryContent: true,
    });
    setDevBox(nanoid10());
    setDataGridData([]);
    getPZLXSelectData(`${yearID}`);
  }, [changeTab]);




  /*
    [
        {
            "guid": "vlY0AdNMl8",
            "andorStr": "0",
            "leftParenthesis": "1",
            "conditionsName": "凭证编号",
            "StateID": 3,
            "rowConditionsData": "1231231",
            "rightParenthesis": "1"
        },
        {
            "guid": "QzousjCLDF",
            "andorStr": "0",
            "leftParenthesis": "1",
            "conditionsName": "凭证月份",
            "StateID": 5,
            "rowConditionsData": "222",
            "rightParenthesis": "1"
        },
        {
            "guid": "-nnI7Ydb_A",
            "andorStr": "1",
            "leftParenthesis": "1",
            "conditionsName": "科目编号",
            "StateID": 4,
            "rowConditionsData": "333",
            "rightParenthesis": "1"
        }
    ]

    */

  const sqlTextFun = (itemVal: any) => {
    let andorStrSql: string = '';
    let leftParenthesisSql: string = '';
    let StateIDSql: string = '';
    let rightParenthesisSql: string = '';
    const {
      andorStr,
      leftParenthesis,
      conditionsName,
      StateID,
      rowConditionsData,
      rightParenthesis,
    } = itemVal;

    if (andorStr === '0') {
      andorStrSql = 'or';
    } else {
      andorStrSql = 'and';
    }
    if (leftParenthesis === '1') {
      leftParenthesisSql = '（';
    } else {
      leftParenthesisSql = '';
    }
    StateIDSql = conditionStatesData[StateID].conditionName;
    if (rightParenthesis === '1') {
      rightParenthesisSql = '）';
    } else {
      rightParenthesisSql = '';
    }
    return `${andorStrSql}（${leftParenthesisSql && rightParenthesisSql ? leftParenthesisSql : ''
      }${conditionsName}
         ${StateIDSql}
        ${rowConditionsData}${leftParenthesisSql && rightParenthesisSql ? rightParenthesisSql : ''
      }）`;
  };

  const sqlStrFun = (itemVal: any) => {
    let andorStrSql: string = '';
    let leftParenthesisSql: string = '';
    let StateIDSql: string = '';
    let rightParenthesisSql: string = '';
    let rowDataStrSql: string = '';

    const {
      andorStr,
      leftParenthesis,
      StateID,
      rowConditionsData,
      rightParenthesis,
      keyString,
      sqlType,
    } = itemVal;

    const isNullSql: string | number = sqlType === 'string' ? `' '` : 0;
    if (andorStr === '0') {
      andorStrSql = 'or';
    } else {
      andorStrSql = 'and';
    }
    if (leftParenthesis === '1') {
      leftParenthesisSql = '(';
    } else {
      leftParenthesisSql = '';
    }
    StateIDSql = conditionStatesData[StateID].slqfh;
    if (StateID === 7 || StateID === 8) {
      rowDataStrSql = `'%${rowConditionsData}%'`;
    } else if (StateID === 9) {
      rowDataStrSql = `'${rowConditionsData}%'`;
    } else if (StateID === 10) {
      rowDataStrSql = `'%${rowConditionsData}'`;
    } else if (StateID === 11 || StateID === 12) {
      rowDataStrSql = `''`;
    } else if (StateID === 13) {
      rowDataStrSql = `Len(IsNull(${keyString}, ${isNullSql})) = ${rowConditionsData}`;
    } else {
      rowDataStrSql = `'${rowConditionsData}'`;
    }
    if (rightParenthesis === '1') {
      rightParenthesisSql = ')';
    } else {
      rightParenthesisSql = '';
    }

    if (keyString === 'FSE') {
      let FSEDataStrSql = 'IsNull((IsNull(JFJE,0) + IsNull(DFJE,0)),0)';
      if (StateID === 13) {
        FSEDataStrSql = `Len(IsNull((IsNull(JFJE,0) + IsNull(DFJE,0)),0)) = ${rowConditionsData}`;
        return `${andorStrSql} (${leftParenthesisSql && rightParenthesisSql ? leftParenthesisSql : ''
          } ${FSEDataStrSql} ${leftParenthesisSql && rightParenthesisSql ? rightParenthesisSql : ''
          })`;
      }
      return `${andorStrSql} (${leftParenthesisSql && rightParenthesisSql ? leftParenthesisSql : ''
        } ${FSEDataStrSql} ${StateIDSql} ${rowDataStrSql} ${leftParenthesisSql && rightParenthesisSql ? rightParenthesisSql : ''
        })`;
    }
    if (StateID === 13) {
      return `${andorStrSql} (${leftParenthesisSql && rightParenthesisSql ? leftParenthesisSql : ''
        } ${rowDataStrSql} ${leftParenthesisSql && rightParenthesisSql ? rightParenthesisSql : ''})`;
    }
    return `${andorStrSql} (${leftParenthesisSql && rightParenthesisSql ? leftParenthesisSql : ''
      } IsNull(${keyString}, ${isNullSql}) ${StateIDSql} ${rowDataStrSql} ${leftParenthesisSql && rightParenthesisSql ? rightParenthesisSql : ''
      })`;
  };

  const createSqlText = (sqlData: any[]) => {
    const sqlTextArr: string[] = [];
    const sqlStrArr: string[] = [];

    sqlData.forEach((item) => {
      sqlTextArr.push(sqlTextFun(item));
    });

    sqlData.forEach((item) => {
      sqlStrArr.push(sqlStrFun(item));
    });
    setQueryData(sqlTextArr.join(' '));
    console.log(sqlData, sqlStrArr.join(' '), '@@@');
    setparamsQueryData(sqlStrArr.join(' '));
  };

  const searchFunction = async (allParams: any, queryDataParams: any) => {
    const { yearID,
      kmmcStr,
      dfkmStr,
      hsxmStr,
      je1Str,
      je2Str,
      je3Str,
      monthStartStr,
      monthEndStr,
      pzlxStr,
      zyStr,
      xswzpzCheck,
      checkQueryContent,
    } = allParams;

    setTreeSelecNode((oldData: any) => {
      const newData: any = { ...oldData };
      newData.spinLoad = true;
      return newData;
    });
    let allSqlText = '';
    let kmmcSqlText = '';
    let hsxmSqlText = '';
    let dfkmSqlText = '';
    let pzlxSqlText = '';
    let zySqlText = '';
    let jeSqlText = '';
    let monthStartSqlText = '';
    let monthEndSqlText = '';

    if (kmmcStr) {
      const stringArray = kmmcStr.split(',');
      // and ( KMMC like '%库存现金%' Or  KMMC like '%银行存款%' Or  KMMC like '%银行存款-建行纳税户%')
      stringArray.forEach((item: any, index: number) => {
        if (index === 0) {
          kmmcSqlText = `and (KMMC like '%${item}%'`;
        } else {
          kmmcSqlText = kmmcSqlText + ` or KMMC like '%${item}%'`;
        }
      });
      kmmcSqlText = kmmcSqlText + ')';
    }
    if (hsxmStr) {
      const stringArray = hsxmStr.split(';');
      // and ( HSXM like '%库存现金%' Or  HSXM like '%银行存款%' Or  HSXM like '%银行存款-建行纳税户%')
      stringArray.forEach((item: any, index: number) => {
        if (index === 0) {
          hsxmSqlText = `and (HSXM like '%${item}%'`;
        } else {
          hsxmSqlText = hsxmSqlText + ` or HSXM like '%${item}%'`;
        }
      });
      hsxmSqlText = hsxmSqlText + ')';
    }
    if (dfkmStr) {
      const stringArray = dfkmStr.split(',');
      // and ( DFKMMC like '%库存现金%' Or  DFKMMC like '%银行存款%' Or  DFKMMC like '%银行存款-建行纳税户%')
      stringArray.forEach((item: any, index: number) => {
        if (index === 0) {
          dfkmSqlText = `and (DFKMMC like '%${item}%'`;
        } else {
          dfkmSqlText = dfkmSqlText + ` or DFKMMC like '%${item}%'`;
        }
      });
      dfkmSqlText = dfkmSqlText + ')';
    }

    if (pzlxStr) {
      pzlxSqlText = `and PZLX='${pzlxStr}'`;
    }
    if (zyStr) {
      zySqlText = `and(ZY Like '%${zyStr}%')`;
    }
    if (je1Str && je2Str) {
      const tempJe3Str = je3Str ? je3Str : '0';
      if (je1Str === '贷方') {
        jeSqlText = `and ( IsNull(DFJE,0)<>0 and ABS(DFJE) ${je2Str} ${tempJe3Str} )`;
      } else if (je1Str === '借方') {
        jeSqlText = `and(IsNull(JFJE,0)<>0 and ABS(JFJE) ${je2Str} ${tempJe3Str})`;
      } else {
        jeSqlText = `and(ABS((IsNull(JFJE, 0) + IsNull(DFJE, 0)) ${je2Str} ${tempJe3Str})`;
      }
    }

    if (monthStartStr) {
      const month1 = parseInt(monthStartStr.slice(-2));
      monthStartSqlText = `and PZYF>= ${month1}`;
    }

    if (monthEndStr) {
      const month2 = parseInt(monthEndStr.slice(-2));
      monthEndSqlText = `and PZYF<= ${month2}`;
    }

    allSqlText = `${kmmcSqlText} ${hsxmSqlText} ${dfkmSqlText} ${pzlxSqlText} ${zySqlText} ${jeSqlText} ${monthStartSqlText} ${monthEndSqlText} ${checkQueryContent ? queryDataParams : ''
      }`;

    const apiNameTemp = 'accountingEntryTest.customDefineQuery.getDataList';
    const res: any = await getChangeApiNameData(apiNameTemp, {
      dbname,
      Data_ID: yearID,
      otherWhere: allSqlText,
      displayOption: xswzpzCheck,
    });
    if (res.success) {
      if (res.data.length > 0) {
        res.data.forEach((element: any) => {
          element.dataGuid = nanoid10();
        });
        setDataGridData(res.data);
      } else {
        setDataGridData([]);
      }
      const scrollableSet = devGridRef?.current?.instance?.getScrollable();
      scrollableSet?.scrollTo({ top: 0 });
      setTreeSelecNode((oldData: any) => {
        const newData: any = { ...oldData };
        newData.spinLoad = false;
        return newData;
      });
    } else {
      setDataGridData([]);
      setTreeSelecNode((oldData: any) => {
        const newData: any = { ...oldData };
        newData.spinLoad = false;
        return newData;
      });
    }
  };

  //  修改基本的参数
  const changeData = (valKey: string, val: any, valType: string = 'paramsData') => {
    setSearchParams((oldData: any) => {
      const newData = { ...oldData };
      newData[valKey] = val;
      if (valType === 'query') {
        searchFunction(newData, paramsQueryData);
      }
      return newData;
    });
  };

  return (
    <div
      className={`conditionalQueryBox ${checkContent ? 'conditionalQueryBox130' : ''}`}
      key={devBox}
    >
      <div className={'search-tool-container'}>
        <div style={{ width: 'calc(100% - 200px)', height: 40, display: 'flex' }}>
          <DevToolBar.Default>
            <Item location={'before'} locateInMenu={"auto"}>
              <div className={'itemBoxGroup'}>
                <div
                  className="itemBoxDispaly-kjfl"
                  style={{ marginBottom: '8px', marginRight: '8px' }}
                >
                  <div
                    style={{
                      width: '56px',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      margin: '0px 9px 0px 5px',
                    }}
                  >
                    <span>年</span>
                    <span>度</span>
                  </div>
                  <SelectBox
                    width="100"
                    placeholder=""
                    dataSource={tableYearArr}
                    displayExpr="Data_ID"
                    valueExpr="Data_ID"
                    value={yearID}
                    onValueChanged={(e: any) => {
                      setTreeSelecNode((oldData: any) => {
                        const newData: any = { ...oldData };
                        newData.yearID = e.value;
                        return newData;
                      });
                      getPZLXSelectData(`${e.value}`);
                      changeData('yearID', e.value, 'query');
                    }}
                  />
                </div>

                <div className="itemBoxDispaly-kjfl" style={{ marginRight: 8 }}>
                  <div
                    style={{
                      width: '60px',
                      margin: '0 5px',
                    }}
                  >
                    凭证类型
                  </div>

                  <SelectBox
                    width="100"
                    placeholder=""
                    dataSource={[
                      { PZLX: '' },
                      ...selectPzlxData
                    ]}
                    displayExpr="PZLX"
                    valueExpr="PZLX"
                    value={searchParams.pzlxStr}
                    onValueChanged={(e: any) => {
                      console.log(e.value, '@@@ e.value');
                      changeData('pzlxStr', e.value);
                    }}
                  />
                </div>
              </div>
            </Item>

            <Item location={'before'} locateInMenu={'auto'}>
              <div className={'itemBoxGroup'}>
                <div className="itemBoxDispaly-kjfl" style={{ marginBottom: '8px' }}>
                  <div
                    style={{
                      width: '60px',
                      margin: '0 5px',
                    }}
                  >
                    科目名称
                  </div>
                  <TextBox
                    value={searchParams.kmmcStr}
                    width={150}
                    // valueChangeEvent='keyup'
                    onValueChange={(value: any) => {
                      console.log(value, '@@@');
                      changeData('kmmcStr', value);
                    }}
                  // inputAttr={nameLabel}
                  >
                    <TextBoxButton
                      name="text"
                      location="after"
                      options={{
                        icon: 'more',
                        stylingMode: 'text',
                        onClick: () => {
                          console.log('@@@ text 刷新');

                          SubjectRef.current.show({
                            title: '选择科目',
                            dbname: dbname,
                            Data_ID: yearID,
                            isHasFZZ: false,
                            editUser: username,
                            // 选择 模式 0：单选 1：多选连机选择
                            selectMode: '1',
                            //  1：多选连机选择时是否进行递归选择默认是 true
                            recursiveMultiple: false,
                            // 是否为辅助账
                            auxiliaryState: false,
                            // 可以选择当前节点的科目
                            isSelectSuperior: false,
                            // 自动结转科目 默认选中的类型参数
                            subjectType: 'periodEarly',
                            okCallback: (r: any, v: any) => {
                              console.log(r, v, '@@@ r, v');

                              // 科目审定明细 界面增加一级科目在业务组件 需做更改
                              let kmmcData = '';
                              if (v.length > 1) {
                                kmmcData = v.map((item: any) => item.KMMC).join(',');
                              } else {
                                kmmcData = r.KMMC;
                              }

                              changeData('kmmcStr', kmmcData);
                            },
                          });
                        },
                      }}
                    />
                  </TextBox>
                </div>
                <div className="itemBoxDispaly-kjfl">
                  <div
                    style={{
                      width: '60px',
                      margin: '0 5px',
                    }}
                  >
                    核算科目
                  </div>
                  <TextBox
                    value={searchParams.hsxmStr}
                    width={150}
                    // valueChangeEvent='keyup'
                    onValueChange={(value: any) => {
                      console.log(value, '@@@');
                      changeData('hsxmStr', value);
                    }}
                  // inputAttr={nameLabel}
                  >
                    <TextBoxButton
                      name="text"
                      location="after"
                      options={{
                        icon: 'more',
                        stylingMode: 'text',
                        onClick: () => {
                          assistPupopRef.current.showAssistPupop({
                            title: '选择辅助账',
                            dbname: dbname,
                            Data_ID: yearID,
                            isHasFZZ: false,
                            editUser: username,
                            // 选择 模式 0：单选 1：多选连机选择
                            selectMode: '1',
                            //  1：多选连机选择时是否进行递归选择默认是 true
                            recursiveMultiple: false,
                            okCallback: (r: any, v: any) => {
                              // 科目审定明细 界面增加一级科目在业务组件 需做更改
                              const displayNameData = v
                                .map((item: any) => item.displayName)
                                .join(';');
                              console.log(r, v, displayNameData, '@@@');

                              changeData('hsxmStr', displayNameData);
                            },
                          });
                        },
                      }}
                    />
                  </TextBox>
                </div>
              </div>
            </Item>

            <Item location={'before'} locateInMenu={'auto'}>
              <div className={'itemBoxGroup'}>
                <div className="itemBoxDispaly-kjfl" style={{ marginBottom: '8px' }}>
                  <div
                    style={{
                      width: '60px',
                      margin: '0 5px',
                    }}
                  >
                    对方科目
                  </div>
                  <TextBox
                    value={searchParams.dfkmStr}
                    width={150}
                    // valueChangeEvent='keyup'
                    onValueChange={(value: any) => {
                      console.log(value, '@@@');
                      changeData('dfkmStr', value);
                    }}
                  // inputAttr={nameLabel}
                  >
                    <TextBoxButton
                      name="text"
                      location="after"
                      options={{
                        icon: 'more',
                        stylingMode: 'text',
                        onClick: () => {
                          console.log('@@@ text 刷新');
                          SubjectRef.current.show({
                            title: '选择科目',
                            dbname: dbname,
                            Data_ID: yearID,
                            isHasFZZ: false,
                            editUser: username,
                            // 选择 模式 0：单选 1：多选连机选择
                            selectMode: '1',
                            //  1：多选连机选择时是否进行递归选择默认是 true
                            recursiveMultiple: false,
                            // 是否为辅助账
                            auxiliaryState: false,
                            // 可以选择当前节点的科目
                            isSelectSuperior: false,
                            // 自动结转科目 默认选中的类型参数
                            subjectType: 'periodEarly',
                            okCallback: (r: any, v: any) => {
                              // 科目审定明细 界面增加一级科目在业务组件 需做更改
                              let kmmcData = '';
                              if (v.length > 1) {
                                kmmcData = v.map((item: any) => item.KMMC).join(',');
                              } else {
                                kmmcData = r.KMMC;
                              }

                              changeData('dfkmStr', kmmcData);
                            },
                          });
                        },
                      }}
                    />
                  </TextBox>
                </div>
                <div className="itemBoxDispaly-kjfl">
                  <div
                    style={{
                      width: '60px',
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      margin: '0 5px',
                    }}
                  >
                    <span>摘</span>
                    <span>要</span>
                  </div>

                  <TextBox
                    // mode={passwordMode}
                    value={searchParams.zyStr}
                    width={150}
                    // valueChangeEvent='keyup'
                    onValueChange={(value: any) => {
                      console.log(value, '@@@');
                      changeData('zyStr', value);
                    }}
                  />
                </div>
              </div>
            </Item>

            <Item location={'before'} locateInMenu={'auto'}>
              <div className={'itemBoxGroup'}>
                <div className="itemBoxDispaly-kjfl" style={{ marginBottom: '8px' }}>
                  <div
                    style={{
                      width: '30px',
                      margin: '0 5px',
                    }}
                  >
                    金额
                  </div>

                  <div
                    className="itemBoxDispaly-kjfl"
                    style={{ width: 290, justifyContent: 'space-between' }}
                  >
                    <SelectBox
                      width="100"
                      placeholder=""
                      dataSource={[
                        { id: 0, name: '' },
                        { id: 1, name: '借方' },
                        { id: 2, name: '贷方' },
                        { id: 3, name: '借方或贷方' },
                      ]}
                      dropDownOptions={{
                        width: '120px',
                      }}
                      displayExpr="name"
                      valueExpr="name"
                      value={searchParams.je1Str}
                      onValueChanged={(e: any) => {
                        console.log(e.value, '@@@ e.value');
                        changeData('je1Str', e.value);
                      }}
                    />
                    <SelectBox
                      width="70"
                      placeholder=""
                      dataSource={[
                        { id: 0, name: '' },
                        { id: 1, name: '<' },
                        { id: 2, name: '>' },
                        { id: 3, name: '=' },
                        { id: 4, name: '<>' },
                      ]}
                      displayExpr="name"
                      valueExpr="name"
                      value={searchParams.je2Str}
                      onValueChanged={(e: any) => {
                        console.log(e.value, '@@@ e.value');
                        changeData('je2Str', e.value);
                      }}
                    />
                    <NumberBox
                      value={searchParams.je3Str}
                      width="100"
                      format="#,##0.##"
                      min={0}
                      onValueChange={(value: any) => {
                        console.log(value, '@@@');
                        changeData('je3Str', value);
                      }}
                    // inputAttr={maxAndMinLabel}
                    />
                  </div>
                </div>
                <div className="itemBoxDispaly-kjfl">
                  <div
                    style={{
                      width: '30px',
                      margin: '0 5px',
                    }}
                  >
                    月份
                  </div>
                  <div
                    className="itemBoxDispaly-kjfl"
                    style={{ width: 290, justifyContent: 'space-between' }}
                  >
                    <SelectBox
                      width="100"
                      placeholder=""
                      dataSource={generateYearMonths(yearID)}
                      displayExpr="selectName"
                      valueExpr="selectName"
                      value={searchParams.monthStartStr}
                      onValueChanged={(e: any) => {
                        console.log(e.value, '@@@ e.value');
                        changeData('monthStartStr', e.value);
                      }}
                    />
                    <div style={{ margin: '0 8px' }}>至</div>
                    <SelectBox
                      width="100"
                      placeholder=""
                      dataSource={generateYearMonths(yearID)}
                      displayExpr="selectName"
                      valueExpr="selectName"
                      value={searchParams.monthEndStr}
                      onValueChanged={(e: any) => {
                        console.log(e.value, '@@@ e.value');
                        changeData('monthEndStr', e.value);
                      }}
                    />
                  </div>
                </div>
              </div>
            </Item>
          </DevToolBar.Default>
          <div className={'itemBoxGroup'}>
            <div className="itemBoxDispaly-kjfl">
              <Button
                text="查询"
                width={110}
                style={{ marginBottom: 10 }}
                type="default"
                onClick={() => {
                  console.log(searchParams, paramsQueryData, '@@@ searchParams');
                  searchFunction(searchParams, paramsQueryData);
                }}
              />
            </div>
            <div className="itemBoxDispaly-kjfl">
              <Button
                text="高级查询"
                type="default"
                width={110}
                onClick={() => {
                  advancedQueryPupopRef.current.showAdvancedQueryPupop({
                    okCallback: (okData: any[]) => {
                      setCheckContent(true);
                      changeData('checkQueryContent', true);

                      if (okData.length > 0) {
                        createSqlText(okData);
                      } else {
                        setparamsQueryData('');
                      }
                    },
                  });
                }}
              />
            </div>
          </div>
        </div>

        <div style={{
          position: 'absolute', top: 0, right: 10,
          width: '170px', height: '32px', display: 'flex', alignItems: 'center', justifyContent: "space-between"
        }}>
          <Button
            type='default'
            hint='查询条件清理'
            onClick={() => {
              setSearchParams((oldObj: any) => {
                let newObj = { ...oldObj };
                newObj = {
                  ...newObj,
                  kmmcStr: '',
                  dfkmStr: '',
                  je1Str: '',
                  je2Str: '',
                  je3Str: '',
                  pzlxStr: '',
                  hsxmStr: '',
                  zyStr: '',
                  monthStartStr: '',
                  monthEndStr: '',
                }
                return newObj
              })
              message.success('已清理查询条件！');
            }} >
            <ClearOutlined />
          </Button>


          <CheckBox
            text="显示完整凭证"
            value={searchParams.xswzpzCheck}
            onValueChanged={(e: any) => {
              changeData('xswzpzCheck', e.value, 'query');
            }}
          />
        </div>
      </div>
      <div className={'search-tool-container-place'} />

      {checkContent && (
        <div className="contentSearchBox">
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'left',
              width: 'calc(100% - 200px)',
            }}
          >
            <CheckBox
              value={searchParams.checkQueryContent}
              onValueChanged={(e: any) => {
                console.log(e.value, '@@@ e.value');
                changeData('checkQueryContent', e.value, 'query');
              }}
            />
            <div
              style={{
                width: 'calc(100% - 25px)',
                paddingLeft: '8px',
              }}
            >
              <Text style={{ width: '100%' }} ellipsis={{ tooltip: queryData }}>
                {queryData}
              </Text>
            </div>
          </div>
          <div
            style={{
              width: '32px',
              height: '32px',
              cursor: 'pointer',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onClick={() => {
              setCheckContent(false);
              setQueryData('');
              changeData('checkQueryContent', false);
            }}
          >
            <CpasIcon type={'icon-close1'} fontSize={16} />
          </div>
        </div>
      )}

      <DevGrid.RangeTap
        className={` PaperDevSortableGrid devHeadersCenter `}
        height={'calc(100% - 50px)'}
        width="100%"
        ref={devGridRef}
        dataSource={dataGridData}
        keyExpr="dataGuid"
        defaultColumns={columnsDataMEJZ}
        showBorders={true}
        showRowLines={true}
        showColumnLines={true}
        allowColumnResizing={true}
        searchPanel={{
          visible: true,
          width: 180,
          placeholder: '',
        }}
        paging={{
          enabled: false,
        }}
        loadPanel={{ enabled: true }}
        scrolling={{
          mode: 'virtual',
          rowRenderingMode: 'virtual',
          renderAsync: true,
        }}
        onCellDblClick={(e) => {
          const { rowType, data, column } = e;
          if (rowType === 'data') {
            let tmepRowData = [{ ...data, Data_ID: yearID, dbname }];
            if (data.gap > 0) {
              tmepRowData = [
                ...tmepRowData,
                {
                  PZBH: data.PZBH_Prior_Org,
                  PZLX: data.PZLX_Prior_Org,
                  PZRQ: data.PZRQ_Prior_Org,
                  Data_ID: yearID,
                  dbname,
                },
              ];
            }
            accountingVoucherPupopRef.current.showPupop(
              { ...data, Data_ID: yearID, dbname },
              tmepRowData,
            );
          }
        }}
        sheetName={treeSelectName}
        excelName={treeSelectName}
      >
        <Summary>
          <TotalItem
            column="JFJE"
            summaryType="sum"
            customizeText={(itemInfo: any) => {
              return moneyFormatCol(itemInfo.value);
            }}
          />
          <TotalItem
            column="DFJE"
            summaryType="sum"
            customizeText={(itemInfo: any) => {
              return moneyFormatCol(itemInfo.value);
            }}
          />
        </Summary>
      </DevGrid.RangeTap>
      <AdvancedQueryPupop ref={advancedQueryPupopRef} />
      <AccountingVoucherPupop ref={accountingVoucherPupopRef}
        cellDblClickCallback={(rowData: any, curYear: any) => {
          msgInfo(`正在打开 明细账,请稍候...`);
          if (window.electronComponents) {
            const sessionParams = JSON.parse(window.sessionStorage.electronParams);
            const { sjxmbh, ZcbfID } = sessionParams.params;
            window.location.href = `cpas://OpenLocalFile/?fileName={UFCPAS4_PATH}/UFCPAS4.exe&params=UserCode={UserCode} UserPwd={UserPwd} ProjectCode=${sjxmbh} ZcbfID=${ZcbfID} Functions=FM_103 FunParameters="Data_ID=${curYear},KMBH=${rowData.KMBH}"`;
          } else {
            console.error('window["electronComponents"] false');
          }
        }}
      />

      <AssistPupop ref={assistPupopRef} />

      <SubjectPopup ref={SubjectRef} />
    </div >
  );
};
export default ConditionalQueryTableList;
